<template>
	<view>
		<cu-custom style="height: 0px;" class="navBox" bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<u-notice-bar mode="horizontal" type="primary" :list="list"></u-notice-bar>

		<u-select :mask-close-able="false" v-model="checkJobShow" :list="jobList" @confirm="confirm" @cancel='cancel'></u-select>
		<view v-if="!checkJobShow" class="contaier">
			<view class="cu-bar bg-white margin-top-xs">
				<view @click="changeTimeSlot" class="action sub-title">
					<text class="text-xl text-bold text-blue text-shadow">计划完成率（昨日）</text>
					<text class="text-ABC text-blue">Completion</text>
				</view>
				<button 
					@click="changeTimeSlot" 
					class="cu-btn bg-blue round shadow sm"
					style="margin-right:20rpx;padding:0 20rpx;width: 200rpx;">
					<uni-icons type="loop" size="14" color="white" style="margin-right: 8rpx;"></uni-icons>计划
				</button>
			</view>
			<view class="chartsMain">
				 <canvas canvas-id="BDomuDBhiWAUllAoxaDhUtyGEbOJwqwM" id="BDomuDBhiWAUllAoxaDhUtyGEbOJwqwM" class="charts" @touchend="tap"/>
			</view>
			
			<view class="cu-bar bg-white margin-top-xs">
				<view class="action sub-title">
					<text class="text-xl text-bold text-blue text-shadow">计划完成率（近7日）</text>
					<text class="text-ABC text-blue">ColumnCharts</text>
				</view>
			</view>
			<view class="chartsMain">
				 <canvas canvas-id="oKNQifLEULtaECFPwqmshiakjfngNuNb" id="oKNQifLEULtaECFPwqmshiakjfngNuNb" class="charts" @touchend="tapcolumn"/>
			</view>
			
			<view style="display: none;" class="btnBox">
				<button @click="changeTimeSlot" class="cu-btn bg-blue round shadow lg">切换人员</button>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	//import uCharts from "@/components/ucharts3.6/u-charts.js";
	import uCharts from "@/pages-others/components/ucharts3.6/u-charts.js";
	var uChartsInstance = {};
	export default {
		data() {
			return {
				requestData:{
					jobId:''
				},
				chartData: {
					categories: [
						{
						value: 0.2,
						color: '#f04864'
					}, {
						value: 0.8,
						color: '#1890ff'
					}, {
						value: 1,
						color: '#2fc25b'
					},
					],
					series: [],
				},
				cWidth: 750,
				cHeight: 450,
				requestData:{
					jobId:''
				},
				jobId:'',
				checkJobShow:false,
				jobList:[
				],
				list:[
					'移动端数据可能出现展示不完全或不完整情况，如需要查看详细数据或者下载巡检数据报表请移步[维保码]电脑端管理后台'
				],
				// 柱状图
				"Column": {
					"categories": [],
					"series": [{
						"name": "完成率",
						"data": []
					}]
				},
				title:'计划完成率'
			};
		},
		onLoad() {
			this.cWidth = uni.upx2px(750);
			//这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(450);
			this.getQrcodeJobList();
		},
		computed: {

		},
		mounted() {
		},
		methods: {
			tapcolumn(e){
			    uChartsInstance[e.target.id].touchLegend(e);
			    uChartsInstance[e.target.id].showToolTip(e);
			},
			cancel(e){
				console.log('cancel')
				console.log(e);
				this.getData(e[0].value)
				this.checkJobShow=false
			},
			confirm(e) {
				console.log('confirm')
				console.log(e);
				this.title=e[0].label
				this.getData(e[0].value)
			},
			getCompletionRate(series){
				let res = {
					// series: [
					// 	{
					// 		name: "完成率",
					// 		color: "#2fc25b",
					// 		data: 0.8
					// 	}
					// ]
				};
				res.series=series;
				//console.log(res)
				this.drawCharts('BDomuDBhiWAUllAoxaDhUtyGEbOJwqwM', res);
			},
			drawCharts(id,data){
			    const ctx = uni.createCanvasContext(id, this);
			    uChartsInstance[id] = new uCharts({
					type: "arcbar",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					series: data.series,
					animation: true,
					background: "#FFFFFF",
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: undefined,
					title: {
					  name: data.series[0].xianshi,
					  fontSize: 35,
					  color: "#2fc25b"
					},
					subtitle: {
					  name: '昨日'+data.series[0].name,
					  fontSize: 18,
					  color: "#666666"
					},
					extra: {
					  arcbar: {
						type: "circle",
						width: 12,
						backgroundColor: "#E9E9E9",
						startAngle: 1.5,
						endAngle: 0.25,
						gap: 2
					  }
					}
			  });
			},
			tap(e){
			    uChartsInstance[e.target.id].touchLegend(e);
			    uChartsInstance[e.target.id].showToolTip(e);
			},
			changeTimeSlot(){
				this.checkJobShow=true;
			},
			getQrcodeJobList(){
				let that=this
				let opts = {
					url: 'api/GetAdminQrcodeJob',
					method: 'get'
				};
				request.httpTokenRequest(opts).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						this.title=res.data.data[0].JobName
						that.getData(res.data.data[0].Id)
						for(let i = 0; i < res.data.data.length; i++) {
							
							let data = res.data.data[i];
							if(data.JobTask==1){
								let item={}
								item.label=data.JobName
								item.value=data.Id
								that.jobList.push(item);
							}
						}
					}
				})
			},
			getData(jobId){
				let that=this
				if(that.requestData.jobId==''){
					uni.showToast({ title: '请选择计划',icon:'none'});
				}
				
				uni.showLoading({
					title: '加载中...'
				})
				that.requestData.jobId=jobId
				let opts = {
					url: 'api/GeJobCompleteRate',
					method: 'get'
				};
				that.covers=[]
				request.httpTokenRequest(opts,that.requestData).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						//柱状图的x轴
						that.Column.categories=[]
						that.Column.categories=res.data.data.x;
						that.Column.series=[]
						let dataALl={}
						dataALl.name='完成率'
						dataALl.data=res.data.data.rate
						that.Column.series.push(dataALl)
						that.getColumnData(that.Column);
						
						//饼图
						that.chartData.series=[]
						let chartData={}
						chartData.name='完成率'
						chartData.data=res.data.data.lastDayData.RateInt/100
						chartData.xianshi=res.data.data.lastDayData.RateInt+'%'
						that.chartData.series.push(chartData)
						that.getCompletionRate(that.chartData.series);
					}
				})
			},
			getColumnData(res) {
			    this.drawColumnCharts('oKNQifLEULtaECFPwqmshiakjfngNuNb', res);
			},
			drawColumnCharts(id,data){
			    const ctx = uni.createCanvasContext(id, this);
			    uChartsInstance[id] = new uCharts({
					type: "column",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					categories: data.categories,
					series: data.series,
					animation: true,
					background: "#FFFFFF",
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,15,0,5],
					enableMarkLine: true,
					legend: {},
					xAxis: {
					  disableGrid: true
					},
					yAxis: {
					  data: [
						{
						  min: 0
						}
					  ]
					},
					extra: {
					  column: {
						type: "group",
						width: 30,
						activeBgColor: "#000000",
						activeBgOpacity: 0.08,
						seriesGap: 5,
						barBorderRadius: [
						  6,
						  6,
						  6,
						  6
						]
					  },
					  markLine: {
						data: [
						  {
							value: 21,
							showLabel: true
						  }
						]
					  }
					}
			  });
			},
			tap(e){
			  uChartsInstance[e.target.id].touchLegend(e);
			  uChartsInstance[e.target.id].showToolTip(e);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
	}
	
	.chartsMain {
		width: 750rpx;
		height: 550rpx;
		padding-top: 15rpx;
		background: #fff;
		margin-bottom: 24rpx;
		border-top: 2rpx solid #f2f2f2;
		z-index: 1;
		.charts {
			width: 750rpx;
			height: 500rpx;
			box-sizing: border-box;
		}
	}
	/* 添加标题行布局样式 */
	.cu-bar .action.sub-title {
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	/* 按钮样式调整 */
	.cu-btn.bg-blue {
	  padding: 0 20rpx;
	  line-height: 1.8;
	  .cuIcon-refresh {
	    font-size: 36rpx;
	    vertical-align: middle;
	  }
	}
</style>
